<!--
 * @Author: tianhao
 * @Date: 2023-01-02 16:24:41
 * @LastEditTime: 2023-02-21 20:03:55
 * @LastEditors: tianhao
 * @Description: 
 * @FilePath: \dcollege\src\views\paper\list.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="top">
    <var-icon name="chevron-left" :size="30" class="ret" @click="fanHui()" />
    <div class="title1">论文选题</div>
  </div>
  <div class="jingxuan" v-for="ti in data">
    <!-- <a href="/details"> -->
    <router-link :to="{ name: 'details', query: { title: ti.title, name: ti.teacher,shengyu:ti.shengyu } }">
      <div class="q">
        <div class="title3">{{ ti.title }}</div>
        <div class="icon">可选</div>
        <div class="time">指导老师:{{ ti.teacher }}</div>
        <!-- <var-icon name="chevron-right" class="tubiao" color="black" /> -->
      </div>
    </router-link>
    <!-- </a> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useCourseStore } from "@/stores/course";
import { storeToRefs } from "pinia";
const router = useRouter();
const CourseStore = useCourseStore();
const { userCourse } = CourseStore;
const { courseList } = storeToRefs(CourseStore);
userCourse();
function fanHui() {
  router.go(-1);
}
const data = ref([
  { id: 1, title: "基于ASP.NET", teacher: "王果儿", count: 25,shengyu:2 },
  {
    id: 2,
    title: "基于ASP.NET实现的实验室网络管理系统",
    teacher: "王利群",
    count: 25,
    shengyu:4
  },
  {
    id: 3,
    title: "基于ASP.NET实现的实验室网络管理系统",
    teacher: "王果儿",
    count: 25,
    shengyu:3
  },
]);
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 60px;
  border-bottom: none;
}
.ret {
  float: left;
  margin-top: 30px;
}
.title1 {
  font-size: 20px;
  position: absolute;
  margin-top: 30px;
  margin-left: 150px;
}
a {
  color: black;
}
.jingxuan {
  width: 95%;
  height: 100px;
  background-color: white;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 10px;
  color: black;
}
.q {
  width: 100%;
  height: 100px;
}
.title3 {
  float: left;
  margin: 15px auto auto 10px;
  color: black;
}
.icon {
  width: 40px;
  height: 20px;
  background-color: rgb(66, 106, 237);
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  float: right;
  text-align: center;
  font-size: 13px;
  color: white;
}
.time {
  position: absolute;
  color: rgb(123, 121, 121);
  margin: 60px auto auto 10px;
  font-size: 10px;
}
.tubiao {
  position: absolute;
  margin: 40px auto auto 220px;
}
</style>
